<template>
    <audio :src="baseURL + `${srcs[src].uid}.mp3`" controls id="myAudio" v-show="false" loop="true"></audio>
    <div id="my-music-player">
        <div class="music-container">
            <div class="logoo" @dblclick="changeShow" v-show="showW">
                <img :src="logo"/>
            </div>
            <div class="player" v-show="!showW">
                <div class="header">
                    <div class="logo logoo" @dblclick="changeShow" >
                        <img :src="logo" />
                    </div>
                </div>
                <div class="body">
                    <div class="time">
                        {{curTime}}
                    </div>
                    <div class="contro">
                        <div>
                            <img :src="left" @click="toLeft">
                        </div>
                        <div>
                            <img :src="isPlay?stop:bofan" @click="clickPlay">
                        </div>
                        <div>
                            <img :src="right" @click="toRight">
                        </div>
                    </div>
                    <div class="volu">
                        <div class="minn" @click="mivv">
                            <img :src="minn"/>
                        </div>
                        <div class="vv">
                            <div id="inner"></div>
                        </div>
                        <div class="maxx" @click="addvv">
                            <img :src="maxx">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
import { initDrag } from '../utils'
export default {
    data() {
        return {
            srcs: [],
            preTime: 0,
            volume: 1,
            src: 0,
            logo: "",
            audio: "",
            bofan: "",
            left: "",
            right: "",
            minn: "",
            maxx: "",
            stop: "",
            isPlay: false,
            curTime: "00:00",
            showW: true,
            // 网易云音乐URL
            baseURL: "http://music.163.com/song/media/outer/url?id="
        }
    },
    created() {
        this.stop = require("@/assets/music/stop.png")
        this.minn = require("@/assets/music/minn.png")
        this.maxx = require("@/assets/music/maxx.png")
        this.logo = require("@/assets/music/logo.png")
        this.left = require("@/assets/music/left.png")
        this.right = require("@/assets/music/right.png")
        this.bofan = require("@/assets/music/bofan.png")
        this.srcs = [{
            name: "到世界尽头",
            uid: 1871520820
        },
        {
            name: "飘向北方",
            uid: 1308818967
        },
        {
            name: "夏日漱石",
            uid: 1359818052
        },
        {
            name: "Take Me Home Country Roads",
            uid: 1477670
        }] 
        this.src = 0
    },
    mounted() {
        this.audio = document.getElementById('myAudio')
        this.audio.loop = false;
        setInterval(() => {
            let t = this.audio.currentTime
            if(this.audio.ended) { //下一首
                this.toRight();
                return 
            }
            t = Math.floor(t)
            let m = Math.floor(t / 60)
            m = m.toString(10)
            if(m.length<2)m = '0' + m
            
            let s = t%60
            s = s.toString(10)
            if(s.length<2)s = '0' + s

            this.curTime = m + ":" + s
        }, 1000);
        
        initDrag("#my-music-player");
        this.initRotate(0)
        this.initRotate(1)
        
    },
    methods: {
        clickPlay() {
            if (this.isPlay) {
                this.isPlay = false
                this.audio.pause()
            } else {
                this.isPlay = true
                this.audio.play()
            }
        },
        mivv() {
            if (this.audio.volume >= 0.2)
                this.audio.volume -= 0.2
            this.volume = this.audio.volume
        },
        addvv() {
            if (this.audio.volume <= 0.8)
                this.audio.volume += 0.2
            this.volume = this.audio.volume
        },
        toLeft() {
            this.audio.pause()
            if(this.src == 0)
                this.src = this.srcs.length-1
            else this.src--
            setTimeout(()=>{
                this.audio.play()
            },100)
            this.isPlay = true  
        },
        toRight() {
            this.audio.pause()
            if(this.src == this.srcs.length-1)
                this.src = 0
            else this.src++
            setTimeout(()=>{
                this.audio.play()
            },100)
            this.isPlay = true
        },
        changeShow() {
            this.showW = !this.showW
        },
        initRotate(id) {
            var box = document.getElementsByClassName('logoo')[id]
            var deg = 0
            var step = 1
            setInterval(()=>{
                deg = (deg + step)%360
                box.style.transform = `rotate(${deg}deg)`
            },10)
        }
    },
    watch: {
        volume() {
            let inner = document.getElementById('inner')
            let a = (1-this.volume)*100
            inner.style.width = a.toString(10) + "%"
        }
    }
}
</script>

<style lang="less" scoped>
    #my-music-player {
        position: absolute;
        z-index: 999;
        left: 40px;
        top: 200px;
    }
    .music-container {
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        img {
            -webkit-user-drag: none;
        }
        .logoo {
            width: 50px;
            // transition: all 0.5s;
            img {
                width: 100%;
            }
        }
        // .logoo:hover {
        //     transform: scale(1.1);
        // }
        .player {
            .header {
                position: relative;
                border-top-left-radius: 15px;
                border-top-right-radius: 15px;
                width: 250px;
                height: 80px;
                background: #000;
                img {
                    width: 100%;
                }
                .logo {
                    position: absolute;
                    top: 15%;
                    left: 40%;
                    width: 50px;
                }
            }
            .body {
                width: 250px;
                height: 150px;
                background: rgb(85, 84, 84);
                border-bottom-left-radius: 15px;
                border-bottom-right-radius: 15px;
                .time {
                    padding-top: 25px;
                    line-height: 35px;
                    text-align: center;
                    color: rgba(189, 184, 184, 0.3);
                    font-size: 35px;
                }
                .contro {
                    margin-top: 25px;
                    display: flex;
                    div {   
                        margin-left: 45px;
                        width: 20px;
                        img {
                            cursor: pointer;
                            width: 100%;
                        }
                    }
                }
                .volu {
                    margin-top: 10px;
                    display: flex;
                    img {
                        cursor: pointer;
                        width: 100%;
                    }
                    .minn {
                        margin-left: 30px;
                        width: 15px;
                    }
                    .vv {
                        position: relative;
                        margin: 0 6px;
                        margin-top: 8px;
                        width: 150px;
                        height: 2px;
                        background: rgb(241, 48, 48);
                        #inner {
                            position: absolute;
                            right: 0%;
                            height: 2px;
                            background: rgb(56, 55, 55);
                        }
                    }
                    .maxx {
                        width: 15px;
                    }
                }
            }
        }
    }
</style>